<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部门管理 - tlias智能学习辅助系统</title>
    <link rel="icon" href="data:,">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="system-name">
            <i class="fas fa-brain"></i>
            <span>tlias 智能学习辅助系统</span>
        </div>
        <div class="user-actions">
            <button class="user-btn">
                <i class="fas fa-key"></i>
                <span>修改密码</span>
            </button>
            <button class="user-btn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
            </button>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="container">
        <h1 class="page-title">
            <i class="fas fa-sitemap"></i>
            部门管理
        </h1>

        <button class="btn btn-primary" id="add-department-btn">
            <i class="fas fa-plus"></i>
            新增部门
        </button>

        <div class="table-container">
            <div class="table-header">
                <div class="table-title">部门列表</div>
                <div class="actions">
                    <button class="btn" id="refresh-btn">
                        <i class="fas fa-sync-alt"></i>
                        刷新
                    </button>
                </div>
            </div>

            <table id="department-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>部门名称</th>
                        <th>最后操作时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="department-table-body">
                    <!-- 初始加载状态 -->
                    <tr>
                        <td colspan="4">
                            <div class="loader-container">
                                <div class="loader"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="table-footer">
                <div class="department-count">
                    共加载 <span id="department-count">0</span> 个部门
                </div>
                <div class="system-time">
                    系统时间: <span id="current-time">--:--:--</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑部门模态框 -->
    <div class="modal" id="department-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-title">添加新部门</h3>
                <button class="close-btn" id="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="department-name">部门名称</label>
                    <input type="text" id="department-name" placeholder="请输入部门名称">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-cancel" id="cancel-btn">取消</button>
                <button class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div class="toast" id="toast"></div>

    <script src="js/main.js"></script>
</body>
</html>